<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
type target = {
    value:number | string
}
let clickBtn1 = ()=>{
    ElMessage({
        message: '按钮1事件触发',
        type: 'success',
    })
}

let clickBtn2 = ()=>{
    ElMessage({
        message: '按钮2事件触发',
        type: 'success',
    })
}

const html = '<p class="hello">hello</p>'

const txt = ref();

// const update = (e: { target: target }) =>{
//     console.log(e.target.value)
// }

const update = (e: { target: target }) =>{
    console.log(e.target.value)
}

</script>
<script lang="ts">
    export default {
        name:'page1_1'
    }
</script>

<template>
    <div id="test">
        <f-button type="default">按钮1</f-button>
        <f-button type="primary">按钮2</f-button>
        <f-input v-model="txt" @input="update" />
        <p>
            输入框内容:{{ txt }}
        </p>
        这是页面1-1的权限
        <el-button type="primary" v-permission="['admin','user']" @click="clickBtn1">admin/user</el-button>
        <el-button type="primary" v-permission="['user']" @click="clickBtn2">user</el-button>
        <el-button type="danger" v-permission="['admin','user']" @click="clickBtn1">admin/user</el-button>
        <el-button type="danger" v-permission="['user']" @click="clickBtn2">user</el-button>
        html
        <div v-html="html">

        </div>
        <div style="height:500px">
        </div>
        <div style="height:500px">
        </div>

    </div>
</template>

<style scoped>
    #test p.hello{
        color: red;
    }
</style>
